Details

Extend ImageLoader functionality to be able to work with image sources containing headers

We preserve the existing strategy that works with image.src for cases where the ImageSource
is just an uri with no headers

When headers are involved we use the fetch API to load the image

Why are there 2 ways to load images?
Because fetch or xhr does not work for

• loading progressive JPEG images
• loading crossorigin blobs

Cross origin image requests can still be made with headers (fetch) if the server is configured correctly

Fixed Issues

$ Expensify/App#12603

Test Strategy

1. Verify existing Image functionality has no regressions

   • build web and examples: npm run dev -w react-native-web and npm run dev -w react-native-web-examples
   • open the examples page and go to Image: http://localhost:3000/image
   • see images are loading
   • take a screenshot and do the same from the master branch. You can switch back and forth and verify the image are loading the same way

2. Verify Images with headers can be loaded

   • build web and examples: npm run dev -w react-native-web and npm run dev -w react-native-web-examples
   • open the examples page and go to Image: http://localhost:3000/image
   • modify sourceWithHeaders here packages/react-native-web-examples/pages/image/index.js and try to load images from a server that expects a GET request with a header
   • verify the image is loading on the examples page (near the bottom, labeled: "With Headers")